<template>
  <div class="order-header">
    <div class="container">
      <div class="header-logo">
        <a href="/#/index"></a>
      </div>
      <div class="title">
        <h2>{{ title }}</h2>
        <slot name="info" class="info"></slot>
      </div>
      <div class="username">
        <a href="javascript:;">{{username}}</a>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: "order-header",
  props: ["title"],
 
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
    computed: {
        ...mapState(['username'])
    },
};
</script>

<style lang="scss">
.order-header {
  padding: 30px 0;
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-logo{
      margin-right: 55px;
    }
    .title{
      flex: 6;
      display: flex;
      align-items: flex-end;
      h2{
        font-size: 28px;
        margin-right: 10px;
      }
      span{
        font-size: 14px;
        color: #999999;
      }
    }
    .username{
      flex: 1;
      a{
        font-size: 14px;
        color: #666666;
      }
    }
  }

}
</style>
